<template>
    <div id="commentInfo" v-if="Object.keys(commentinfo).length !== 0" >
            <!-- 评论头部模块 -->
        <div class="comment-head">
            <span>用户评价</span>
            <span>更多</span>
        </div>
        <div class="comment-info">
            <div class="user-info">
                <span class="user-logo">
                    <img :src="commentinfo.list[0].user.avatar" alt="" />
                </span>
                <span>{{commentinfo.list[0].user.uname}}</span>
            </div>
            <div class="user-essay">
                {{commentinfo.list[0].content}}
            </div>
            <div class="other-info">
                <span>{{commentinfo.list[0].created | getData}}</span>
                <span class="style">{{ commentinfo.list[0].style }}</span>
            </div>
        </div>
    </div>
</template>
<script>
// 引入时间转化格式
  import {formatDate} from "commons/util"

    export default {
        name:'DetailCommentInfo',
        props:{
            commentinfo:{
                type:Object,
                default(){
                    return{}
                }
            }
        },
        filters:{
            getData:value=>{
                var date = new Date(value * 1000);
                console.log('日期报错');
               // console.log(date);
                return formatDate(date,'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>
<style scope>
#commentInfo {
    border-bottom: 5px solid #f7f7f7;
  }
  .comment-head {
    padding: 15px 10px;
    display:flex;
    justify-content:space-between;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }
  span > strong {
    padding-left: 8px;
  }
  .comment-info {
    padding: 15px 10px;
  }
  .user-logo {
    display: inline-block;
    width: 50px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .user-logo img {
    width: 100%;
    border-radius: 50%;
  }
  /* 用户评论 */
  .user-essay {
    font-size: 13px;
    padding: 10px 5px;
    color: #777;
  }
  /* 评论细节 */
  .other-info {
    font-size: 11px;
    color: #999;
    padding: 0 5px;
  }
  .style {
    margin-left: 10px;
  }
</style>